<template>
  <div class="kill-box">
    <div>
      嗨购秒杀
      <span class="red">8点场</span>
      <!-- 自定义事件 -->
      <!-- <van-button type="primary" @click="fn">主要按钮</van-button> -->
      <van-count-down :time="time" class="djs">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <span class="bao">爆款轮番秒 <van-icon name="arrow" /></span>
    </div>

    <ul>
      <li v-for="item in list" :key="item.proid" @click="goDetail(item.proid)">
        <img :src="item.img1" alt="" />
        <p>￥{{ item.originprice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "SecondsKill",
  data() {
    return {
      time: 30 * 60 * 60 * 1000, //30h
      list: [],
      count: "1",
    };
  },
  created() {
    // 获取秒杀商品的列表
    let getKillsGoods = () => {
      axios({
        url: "/api/pro/seckilllist",
        params: {
          count: this.count,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    };
    getKillsGoods();
  },
  methods: {
    goNext() {
      this.count++;
      if (this.count > 3) {
        this.count = 1;
      }
      let getKillsGoods = () => {
        axios({
          url: "http://121.89.205.189:3001/api/pro/seckilllist",
          params: {
            count: this.count,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        });
      };
      getKillsGoods();
    },
    goDetail(goodsid) {
      this.$router.push("/GoodsDetail/" + goodsid);
    },
  },
};
</script>

<style scoped>
.kill-box {
  width: 100%;
  box-sizing: border-box;
  height: 8.5rem;
  background: url(../assets/title_wrap.png) repeat-x;
  background-size: 100%;
  background-color: rgba(196, 197, 187, 0.104);
  border-radius: 10px;
  padding: 0 10px;
  position: relative;
}
.djs {
  position: absolute;
  left: 120px;
  top: 0;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
.red,
.bao {
  color: red;
  margin-left: 10px;
}
.bao {
  float: right;
}
ul{
  height: 3.75rem;
  display: flex;
  justify-content: space-between;
  margin-top: .625rem;
}
img{
  width: 100%;
  height: 100%;
}
p{
  color: #f66;
  margin-top: .1875rem;
}
.van-icon{
  background-color: #f66;
  border-radius: 50%;
  color: white;
  font-size: .75rem;
}
</style>